<template>
  <div>
    <a-form>
      <a-form-item required label="标题:" :label-col="{ md: 2,xs:24 }" :wrapper-col="{ md: 6,xs:24 }">
      	<a-input v-model="formItem.title" placeholder="请输入栏目名称" />
      </a-form-item>
      <a-form-item required label="封面:" :label-col="{ md: 2,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
        <UploadImage :defaultImageList="imageLists" :maximum="1" ref="uploadThumbImage"></UploadImage>
    	</a-form-item>
      <a-form-item required label="栏目:" :label-col="{ md: 2,xs:24 }" :wrapper-col="{ md: 6,xs:24 }">
        <a-select v-model="formItem.column_id" placeholder="请选择栏目">
          <a-select-option v-for="item in columnData" :value="item.id" :key="item.id">{{item.column_name}}</a-select-option>
        </a-select>
      </a-form-item>
    	<a-form-item label="别名:" :label-col="{ md: 2,xs:24 }" :wrapper-col="{ md: 6,xs:24 }">
    		<a-input v-model="formItem.alias" placeholder="请输入别名" />
    	</a-form-item>
    	<a-form-item required label="内容:" :label-col="{ md: 2,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
    		<Editor v-model="formItem.content"/>
    	</a-form-item>
      
      <a-form-item :wrapper-col="{ md: 12,xs:24, offset: 5 }">
        <a-button class="mr20" type="primary" html-type="submit" :loading="confirmLoading" @click="addBtn">提交</a-button>
        <a-button type="danger" @click="returnBtn">返回</a-button>
      </a-form-item>
    </a-form>

  </div>
</template>

<script>
  import Editor from '@C/ueditor/ueditor';
  import UploadImage from "@C/upload/UploadImage";
  import { mapState, mapActions } from 'vuex';
    export default {
        name: "Add",
        components: {
          Editor,
          UploadImage
        },
        data(){
        	return {
            /* 添加编辑 */
            confirmLoading: false,//按钮loading状态
            ifEditor: true,
            formItem:{
            	title: '',    // 标题
              alias: '',    // 副标题
              // column_id: '',    // 栏目ID
              content: '',    // 内容
            },
            /* 添加编辑end */
            imageLists: []
        	}
        },
        computed: {
        	...mapState({
        		requestCode: state => state.newList.requestCode,
        		columnData: state => state.newList.columnData,  //全部栏目信息
            itemDetail: state => state.newList.itemDetail,  //详情
        	}),
        },
        methods: {
          ...mapActions({
            dataAdd: 'newList/dataAdd',        //添加
            dataEdit: 'newList/dataEdit',      //编辑
            dataDetail: 'newList/dataDetail',    //详情
            columnAll: 'newList/columnAll',    //全部栏目信息
          }),
            // 提交
          addBtn() {
            this.confirmLoading = true;
            if (this.$refs.uploadThumbImage.uploadImageList.length > 0) {
              console.log(this.$refs.uploadThumbImage.uploadImageList[0].url);
              this.formItem.img = this.$refs.uploadThumbImage.uploadImageList[0].url;
            }
            if (this.$route.params.id !== undefined) {
              const id = this.$route.params.id;
              this.formItem.id = id;
              this.dataEdit(this.formItem);//编辑
            } else {
              this.dataAdd(this.formItem) //添加
            }
            setTimeout(() => {
              if(this.requestCode === 0) {
                this.$router.back(-1)
              }
              this.confirmLoading = false;
            }, 1000);
          },
          //返回
          returnBtn(){
            const that = this
            this.$confirm({
            	title: `您确定要返回上一页吗?`,
            	content: `返回上一页将不保留当前输入数据!`,
            	okText: '确定',
            	okType: 'danger',
            	cancelText: '取消',
            	onOk() {
                that.$router.back(-1)
            	},
            });
          },
          initDetail() {
            this.formItem.title = this.itemDetail.title;            // 标题
            this.formItem.alias = this.itemDetail.alias;            // 副标题
            this.formItem.column_id = Number(this.itemDetail.column_id);    // 栏目ID
            this.formItem.content = this.itemDetail.content;        // 内容
            this.formItem.img = this.itemDetail.img
            if (this.itemDetail.img != null) {
              let imgLists = {
                status: "finished",
                url: this.itemDetail.img
              };
              this.imageLists.push(imgLists);
            }
            console.log(this.formItem)
          }
        },
        mounted(){
          this.columnAll()
          if (this.$route.params.id !== undefined) {
            const id = this.$route.params.id;
            this.dataDetail(id);
          }
        },
        watch: {
          itemDetail() {
            this.initDetail();
          },
        },
    }
</script>

<style scoped>

</style>
